<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">当日数据:</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          {{ todayOrder }} <span>订单</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          {{ totayAmount }} <span>销售额</span>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple-dark">总数据:</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          {{ totalOrder }} <span>订单</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          {{ totalAmount }} <span>销售额</span>
        </div></el-col
      >
    </el-row>
    <!-- 1. echarts容器 -->
    <div id="firstecharts" style="width: 1000px; height: 500px"></div>
  </div>
</template>

<script>
// 1.引入刚刚下载的 ECharts 文件
import * as echarts from "echarts";
import { OrderTotalData } from "../../../api/apis";
export default {
  mounted() {
    let mcharts = echarts.init(document.querySelector("#firstecharts"));
    // 2. 创建配置对象

    OrderTotalData().then((res) => {
      this.totalOrder = res.data.totalOrder;
      this.totalAmount = res.data.totalAmount;
      this.todayOrder = res.data.todayOrder;
      this.totayAmount = res.data.totayAmount;
      var option = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单数据", "销售金额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数据",
            type: "line",
            stack: "Total",
            data: res.data.orderData,
          },
          {
            name: "销售金额",
            type: "line",
            stack: "Total",
            data: res.data.amountData,
          },
        ],
      };

      // 3. 使用echarts实例对象， 关联数据配置对象， 创建表格
      mcharts.setOption(option);
    });
  },

  data() {
    return {
      totalOrder: "", //总订单
      totalAmount: "", //总销售额
      todayOrder: "", //今日订单
      totayAmount: "", //今日销售额
    };
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 30px;
  &:last-child {
    margin-bottom: 0px;
  }
  width: 800px;
}
.el-col {
  border-radius: 4px;
  div {
    span {
      font-size: 14px;
      color: #666;
    }
  }
}

.bg-purple {
  background: #d3dce6;
  text-align: center;
  font-size: 30px;
}

.bg-purple-light {
  background: #f56c6c;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
.bg-purple-dark {
  background: #e6a23c;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
.grid-content {
  border-radius: 4px;
  min-height: 50px;
  line-height: 50px;
}
#firstecharts {
  margin-top: 40px;
}
</style>